<template>
	<gui-page>
		<template v-slot:gBody>
			<gui-a-header title="培训详情"></gui-a-header>
			<view class="video" v-show="showVideo">
				<video id="myVideo" class="gui-course-video" :src="curData.video" object-fit="cover" @pause="pause"
					poster="https://images.unsplash.com/photo-1662581872342-3f8e0145668f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxMXx8fGVufDB8fHx8&auto=format&fit=crop&w=600&q=60"
					controls :show-center-play-btn="false" :enable-play-gesture="true"></video>
				<view class="play-video flex-ac-jc radius" @tap="playVideo" v-show="!isPlayVideo">
					<image src="../../static/mine/icon_play.png" mode="widthFix" style="height: auto;">
					</image>
				</view>
			</view>
			<view class="detail">
				<view class="title colorBlue f32 gui-bold">
					{{curData.title}}
				</view>
				<view class="people-time flex-ac-jb c666">
					<view class="people" v-show="showVideo">
						<text class="gui-icons pr10">&#xe609;</text>
						<text>{{curData.browse}}人</text>
					</view>
					<view class="time">
						<text>徐州人力发布</text>
						<text>{{curData.createTime}}</text>
					</view>
				</view>
				<view class="title-desc gui-bold">
					文字概要
				</view>
				<view class="desc c666 f24">
					<mp-html :content="$u.richImg(curData.content)" />
				</view>
			</view>
		</template>
	</gui-page>
</template>

<script setup>
	import {
		getCourseWareInfo
	} from '@/api/user.js';
	import {
		getIndexOnload
	} from '@/api/app.js';
	
	import {
		ref,
		reactive,
		inject
	} from 'vue'
	const $u = reactive(inject('$u'))
	import {
		onLoad
	} from '@dcloudio/uni-app'
	const videoContext = ref(uni.createVideoContext('myVideo')) //创建video实例
	const videoUrl = ref(
		'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400'
	) //视频地址
	const isPlayVideo = ref(false)
	const showVideo = ref(false)
	const playVideo = (url) => {
		videoContext.value.play()
		isPlayVideo.value = true
	}
	const pause = () => {
		isPlayVideo.value = false
	}
	
	const curId = ref('')
	const curData = ref({})
	
	onLoad((option) => {
		if(option.curId) {
			curId.value = option.curId;
			loadData();
		}
	})
	
	const loadData = () => {
		getCourseWareInfo({
			id: curId.value
		}).then(res => {
			if(res.code == 200) {
				curData.value = res.data;
			}
		})
		console.log("==============1");
		getIndexOnload().then(res => {
			if(res.code == 200) {
				if(res.data == 1) {
					showVideo.value = false;
				}else if(res.data == 2) {
					showVideo.value = true;
				}
			}
		})
	}
</script>

<style lang="scss">
	page{
		background: #ffffff;
	}
	
	.pr10 {
		padding-right: 10rpx;
	}
	.video {
		position: relative;
		width: 750rpx;
		height: 420rpx;

		.gui-course-video {
			width: 100%;
			height: 100%;
		}

		.play-video {
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			background: rgba(0, 0, 0, .1);
			z-index: 9;

			image {
				width: 120rpx;
			}
		}
	}
    .detail{
		padding: 20rpx 30rpx;
		.people-time{
			border-bottom: 1px solid #f3f3f3;
			margin-top: 30rpx;
			padding-bottom: 30rpx;
		}
		.title-desc{
			color: #212121;
			padding-top: 34rpx;
		}
		.desc{
			margin-top: 16rpx;
			line-height: 40rpx;
		}
	}

</style>